{extend name="../layout/base" /}

{block name="body_head"}
{include file="common/body_head" /}
{/block}
{block name="left_menu"}{/block}

{block name="body"}
<div class="layui-tab layui-tab-brief" lay-filter="tabBrief">
    <div class="layui-tab-content">
        <form class="layui-form" action="{$post_url ?? ''}" id="ajax-form" method="post">
            {if condition="!empty($tip)"}
            <blockquote class="layui-elem-quote">{$tip|raw}</blockquote>
            {/if}

            <input type="hidden" id="__token__" name="__token__" value="{:request()->token()}" />
            {foreach $form_items as $k => $form}
            {switch name="form.type"}
            {case value="hidden"}{include file="../admin/builder/formtype/hidden" /}{/case}
            {default /}{include file="../admin/builder/formtype/text" /}
            {/switch}
            {/foreach}

            <div class="layui-form-item layui-form-pane">
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <fieldset class="layui-elem-field">
                            <legend>消息预览</legend>
                            <div class="layui-field-box">
                                <div class="layui-form-item layui-row">
                                    <div class="layui-col-md12" id="preview">
                                        {:str_replace("\\n", "<br>", $template.content)}
                                    </div>
                                    <input type="hidden" id="preview-input" name="preview">
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="layui-col-md8">
                        <fieldset class="layui-elem-field">
                            <legend>消息设置</legend>
                            <div class="layui-field-box">
                                <div class="layui-form-item layui-row">
                                    <div class="layui-col-md12">
                                        {foreach $keywords as $key => $item}
                                        <div class="layui-form-item">
                                            <label class="layui-form-label" style="width: 180px;padding: 5px 10px;"><span class="error-msg">*</span>{$item}</label>
                                            <div class="layui-input-inline" style="width: 300px;">
                                                <input type="text" name="{$item}" data-key="{$item}" required lay-verify="required" autocomplete="off" class="js-keyword layui-input">
                                                <input type="hidden" name="color_{$item}" value="#000000" class="color-input-{$key} layui-input">
                                                <span id="js-color-{$key}"></span>
                                            </div>
                                        </div>
                                        {/foreach}
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    {if $btn_submit['show']}
                    <button class="layui-btn layui-btn-normal" type="submit">{$btn_submit['text']}</button>
                    {/if}
                    {if $btn_reset['show']}
                    <button type="reset" class="layui-btn layui-btn-primary">{$btn_reset['text']}</button>
                    {/if}
                </div>
            </div>
        </form>
    </div>
</div>
{/block}

{block name="css"}
<style>
    .js-keyword{display: inline-block; width: 80%;}
</style>
{/block}

{block name="js"}
<script src="__STATIC__/libs/jq-module/jquery-validation/jquery.validate.js"></script>
<script src="__STATIC__/libs/jq-module/jquery-validation/localization/messages_zh.js"></script>

<script>
    $(function () {
        var loading_index;

        layui.use(['form', 'colorpicker'],function(){
            var form = layui.form
            , colorPicker = layui.colorpicker;
            //刷新界面 所有元素
            form.render();

            {foreach $keywords as $key => $item}
            colorPicker.render({
                elem: '#js-color-{$key}' //绑定元素
                ,color:'#000000'
                ,done: function(color){ //颜色改变的回调
                    $('.color-input-{$key}').val(color);

                    var previewHtml = $('#preview').html()
                            , keyword = $(this.elem).siblings('.js-keyword').val() ? $(this.elem).siblings('.js-keyword').val() : $(this.elem).siblings('.js-keyword').data('key');
                    //console.log(keyword);
                    $('#preview').html(previewHtml.replaceAll(keyword, `<span style="color:${color}">${keyword}</span>`));
                    $('#preview-input').val($('#preview').html());
                }
            });
            {/foreach}
        });

        $('.js-keyword').on('change', function () {
            var previewHtml = $('#preview').html();
            $('#preview').html(previewHtml.replaceAll($(this).attr('data-key'), $(this).val()));
            $('#preview-input').val($('#preview').html());
            $(this).attr('data-key', $(this).val());
        });

        //增加扩展规则
        $.validator.addMethod("phone", function(value) {
            if(value.length){
                const pattern = /^1[2-9]\d{9}$/;
                return pattern.test(value);
            }
            return true;
        }, '手机号码格式错误');

        /**
         * 添加、修改的表单提交
         * @param form
         */
        $('#ajax-form').validate({
            errorClass: 'error-msg',
            submitHandler: function(form) {  //通过之后回调
                var param = $(form).serialize();
                $.ajax({
                    url : $(form).attr('action'),
                    method: 'post',
                    data: param,
                    beforeSend: function(){
                        loading_index = layer.load(1);
                    },
                    success : function(res) {
                        if(res.code === 1 ) {
                            layer.msg(res.msg, {time: 1500}, function(){
                                if(typeof res.url !== 'undefined' && res.url){
                                    window.location.href = res.url;
                                }else{
                                    window.history.go(-1);
                                }
                            });
                        } else{
                            $('#__token__').val(res.data.token);
                            layer.alert(res.msg);
                        }
                    },
                    error: function(request, textStatus){
                        layer.msg('500 Internal Server Error', {time: 1500}, function(){
                            //location.reload();
                        });
                    },
                    complete: function(){
                        layer.close(loading_index);
                    }
                });
            },
            invalidHandler: function(form, validator) {  //不通过回调
                return false;
            }
        });
    });
</script>
{/block}